iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 18
0

昨天看完了Computed與Methods,今天來看Watch!從名字因該能多少能猜到一點了,它會幫我們監視某個值,如果這個值發生了改變,就去做我們指定的工作,馬上靠一個實例來認識它吧!

Watch範例

我做一個雙向綁定的<input>,判斷資料改變並離開<input>後跳出alert訊息框,如果忘記雙向綁定可以回去看一下( https://ithelp.ithome.com.tw/articles/10201973 ):

<template>
  <div id="app">
    <h1>鐵人30抽獎活動</h1>
    <input type="text" v-model.trim.lazy="myname">
    <p>抽獎人 {{ myname }}</p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        myname:'請輸入真實姓名'
      }
    },
    watch: {
      myname() {
        alert('祝您中獎!')
      }
    }
  }
</script>

watch用法跟昨天學的Computed與Methods一樣,直接把函數放入watch裡就行了,相當實用的功能,原本computed無法做到的事,靠它就能補足。

最近工作上剛好也用到watch,主要是讓它幫我監視日期選單,只要使用者改選其它日期,就重新打api抓回該日期的資料,非常簡單好用,相信未來watch也能幫你解決許多問題!

immediate屬性

從剛剛學習的內容,我們知道watch會在目標改變時才開始運算函數,那如果我還另外想要在初始時就執行呢?這時就要用到immediate屬性了!如下範例:

<script>
  data() {
      return {
        myName: '姓名',
        mail: '電子信箱'
      }
  },
  watch: {
    myName: {
      handler {
        alert('請輸入真實姓名')
      },
      immediate: true
    }
  }
</script>
  • 我先加入了handler(這是保留字)函數,其實之前範例中watch裡加入的函數名默認就是handler,vue會去運算裡面的內容。
  • immediate的預設值為false,所以之前沒寫immediate都會被視為false,而當我加入immediate:true後,wacth裡的myName在初始時就會先去執行handler裡的函數,這樣一來除了改變時會運算函數,初始時也同樣會運算。

deep屬性

watch的deep屬性意思為是否深層監視,因為預設為沒有,所以當你想監視的資料不在同一層時,就要加入deep: true如下範例:

<script>
  data() {
    return {
      myData: {
        myName: 'Adam',
        mail: 'Adam@xxx.com.tw'
      }
    }
  },
  watch: {
    myData: {
      handler {
         alert('完成資料更新')
      },
      deep: true
    }
  }
</script>

從上面範例可以看到,資料存放在(myData)子層內,預設是無法watch到的,這時加入deep: true就能向內找到目標並監視它。

以上就是今天Watch的學習內容。


上一篇
Vue[17]-Computed與Methods
下一篇
Vue[19]-生命週期
系列文
網頁設計靠 Vue.js 轉前端30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言